<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程详情页</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="shortcut icon" href="img/logo.ico"/>
    <link rel="bookmark" href="img/logo.ico" type="image/x-icon"/>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/description.css">
    <script src="js/cacheUtil.js"></script>
    <script src="js/httpUtil.js"></script>
</head>
<body>
<div class="container">
    <iframe src="head.html" frameborder="0" width="100%" height="72" scrolling="No"></iframe>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <img alt="140x140" id="des_img" src="" class="img-rounded col-md-4"/>
            <div class="col-md-8">
                <label id="des_name"></label><br/>
                ￥<label id="des_price"></label><br/><br/><br/><br/>
                <button type="button" class="btn btn-warning" onclick="startOrder()">立即购买</button>
                <button type="button" class="btn btn-default">免费试看</button>
                <span id="des_cart" onclick="addCart()"><img id="des_bag" src="img/des_bag.png"/>加入购物车</span>
            </div>
        </div>
        <div class="col-md-12">
            <div class="showStatus">
                <ul id="des_status">
                    <li><a href="">介绍</a></li>
                    <li><a href="">目录</a></li>
                    <li><a href="">笔记</a></li>
                    <li><a href="">讨论区</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-8" id="des">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-8 column">
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <iframe src="bottom.html" frameborder="0" width="100%" height="200" scrolling="No"></iframe>
</div>


<script>
    $(function () {
        loadCourse();
    })

    function loadCourse() {
        let course = getCourse();
        $("#des_name").html(course.name);
        $("#des_price").html(course.price);
        $("#des").html(course.des);
        // $("#des_img").html().src = course.img;
        $("#des_img").attr("src", course.img);
    }

    function startOrder() {
        /*1.获取[1.price 2.订单号 3.订单名称]
        * 2.发送请求  */
        let course = JSON.parse(sessionStorage.getItem("course"));
        let order_price = course.price;
        // let order_Name = course.name;
        let order_Name = "hooc course order"
        let order_ID = getOrderId();
        let url = "/order/start";
        let params = {
            WIDout_trade_no: order_ID,
            WIDtotal_amount: order_price,
            WIDsubject: order_Name,
            WIDbody: "kevin pay demo",
            passback_params: course.id
        };
        console.log("params is : " + params.valueOf());
        console.log("param.json is : " + JSON.stringify(params));
        httpGetHtml(url, params, function (resp) {
            console.log("alipay resp is : " + resp);
            $('body').append(resp);
            $("form").attr("target", "_blank");
        })
    }

    function getOrderId() {
        let vNow = new Date();
        let sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
        return sNow;
    }

    function addCart() {
        console.log("已点击加入购物车")
        /*加入购物车*/
        /**
         * from : description.html
         * param : userId, courseId, coursePrice
         * to : /cart/addCart
         * param : alert("添加成功")
         */
        let url = "/cart/addCart"
        let params = "userId=" + getLoginUser().id + "&courseId=" + getCourse().id + "&price=" + getCourse().price;
        httpGet(url, params, function (resp) {
            alert("添加成功");
        })
    }

</script>
</body>
</html>


